<script setup>
import api from "@/api/api";
import { closeToast, showLoadingToast, showToast } from "vant";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const hasSubmit = ref(false);
const form = ref({
  option1: "",
  option2: "",
  option3: "",
  option4: "",
  option5: false,
  option6: "",
});
const id = ref(-1);
const loading = ref(true);
const fileList = ref([]);

const afterRead = async (file) => {
  file.status = "uploading";
  file.message = "上传中";
  let data = new FormData();
  data.append("file", file.file);
  let res = await api.upload(data);
  console.log(res);
  form.value.option4 = res;
  file.status = "down";
  file.message = "上传成功";
};
const del = () => {
  if (hasSubmit) return;
  form.value.option4 = "";
};

const onSubmit = async () => {
  let res = await api.zba_submit(form.value);
  showToast(res);
  let res2 = await api.getEnrollInfo({ id: id.value }).finally(() => {
    closeToast();
    loading.value = false;
  });
  hasSubmit.value = res2.isReg === 1;
};

onMounted(async () => {
  id.value = route.query.id;
  showLoadingToast({
    duration: 0,
    forbidClick: true,
    message: "加载中...",
  });
  let res = await api.getEnrollInfo({ id: id.value }).finally(() => {
    closeToast();
    loading.value = false;
  });
  hasSubmit.value = res.isReg === 1;
  if (hasSubmit.value) {
    form.value.option1 = res.option1;
    form.value.option2 = res.option2;
    form.value.option3 = res.option3;
    form.value.option4 = res.option4;
    form.value.option5 = res.option5 == 1 ? true : false;
    form.value.option6 = res.option6;
    fileList.value.push({
      url: res.option4,
    });
  }
});
</script>

<template>
  <div v-if="!loading" class="home">
    <van-form @submit="onSubmit" :border="false">
      <van-cell-group inset>
        <van-field v-model="form.option1" name="option1" label="具体地点" center :border="false" clearable autocomplete="off"
          required :disabled="hasSubmit" :rules="[{ required: true, message: '请填写具体地点' }]" />
        <van-field v-model="form.option2" type="digit" name="option2" label="可容纳人数" center :border="false" clearable
          autocomplete="off" required :disabled="hasSubmit" :rules="[{ required: true, message: '请填写可容纳人数' }]" />
        <van-field v-model="form.option3" name="option3" label="联系方式" type="tel" center :border="false" clearable required
          :disabled="hasSubmit" autocomplete="off" :rules="[{ required: true, message: '请填写联系方式' }]" />
        <van-field label-width="7rem" name="option3" label="是否有消费折扣" center :border="false" :disabled="hasSubmit" required
          autocomplete="off" class="spec">
          <template #input>
            <van-radio-group v-model="form.option5" direction="horizontal" :disabled="hasSubmit">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-if="form.option5" v-model="form.option6" name="option2" label="折扣力度" center :border="false" clearable
          autocomplete="off" :required="form.option5" :disabled="hasSubmit" :rules="[
            {
              required: form.option5,
              message: '请填写',
            },
          ]" />
        <van-field v-model="form.option4" name="option4" center required label-align="top" :disabled="hasSubmit"
          :border="false" :rules="[{ required: true, message: '请上传图片' }]" class="spec">
          <template #label>
            <div class="cell_title">
              <span>上传场地实景图片 </span>
              <span class="small">(需标注大屏位置、观众区、出入口)</span>
            </div>
          </template>
          <template #input>
            <van-uploader v-model="fileList" :max-count="1" :disabled="hasSubmit" :after-read="afterRead"
              :before-delete="del">
              <div class="upload_box">
                <img src="@/assets/icons/upload.png" alt="" srcset="" />
                <span class="upload_text">点击上传图片</span>
              </div>
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 50px 100px 0 100px">
        <van-button round block type="primary" native-type="submit" :disabled="hasSubmit"
          color="linear-gradient(to right,#ed447f,#ed8444)">
          {{ hasSubmit ? "已提交" : "提交" }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="less" scoped>
/* 样式 */
.home {
  min-height: 100vh;
  background-color: #fff;
  background-image: url("@/assets/icons/zba_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  padding: 15px 0 0 0;
  --van-cell-background: transparent;
  --van-cell-group-background: transparent;
  --van-cell-horizontal-padding: 0;

  :deep(.van-hairline--bottom:after) {
    border: unset;
  }

  .cell_title {
    font-size: 14px;

    .small {
      font-size: 12px;
    }
  }

  :deep(.van-uploader) {
    width: 100%;

    .van-uploader__input-wrapper {
      width: 100%;
    }
  }

  :deep(.van-field__body) {
    padding: 8px;
    background-color: #fff;
    border: 2px solid #fadece;
    border-radius: 10px;
  }

  .spec :deep(.van-field__body) {
    padding: unset;
    background-color: unset;
    border: unset;
    border-radius: unset;
  }

  .upload_box {
    width: 100%;
    height: 90px;
    background-color: #e4e5e4;
    border-radius: 15px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 23px;
      height: 20px;
    }

    .upload_text {
      font-size: 12px;
      color: #dd9162;
      margin-top: 6px;
      font-weight: bold;
    }
  }
}
</style>
